<template>
    <div class="loginContainer">
        <el-button plain type="text" style="position:absolute;left:20px;top:20px;font-size:18px;"
            @click="back">返回</el-button>
        <div class="box">
            <div class="itemBox">
                <div style="display:flex;flex-direction:row;justify-content:space-between;">
                   <input @change="uploadFile" type="file">
                </div>
            </div>
            <div class="itemBox">
                <div style="width:120px;text-align:left;">读取结果：</div>
                <div class="resultBox">
                    {{ fileContent }}
                </div>
            </div>
        </div>
    </div>
</template>
<!-- 识别本地txt文件 txt文件/@/assets/words.txt -->
<script lang="ts" setup>
import { ref } from 'vue'
const fileContent = ref('');

const uploadFile = async(event: any) => {
    console.log(event)
    const file = event.target.files[0]
    const filePath = URL.createObjectURL(file)
    const response = await fetch(filePath)
    const filteredText: any =await response.text()
    // 文件内格式处理
    fileContent.value = filteredText.split('\n').join('').split('\r')
    console.log(fileContent.value)
}
const back = () => {
    window.history.back()
}
</script>
<style lang="scss" scoped>
.loginContainer {
    height: 100vh;
    width: 100vw;
    padding: 60px;
    box-sizing: border-box;
    cursor: pointer;
}

.box {
    margin-top: 30px;

}

.itemBox {
    display: flex;
    flex-direction: row;
    margin: 20px auto;
}

.resultsItem {
    text-align: left;
    white-space: pre-wrap;
    line-height: 30px;
}

.resultBox {
    width: 800px;
    max-height: 400px;
    overflow: auto;
}
</style>
  